<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>挂号信息接收</title>
    <script src="../static/qrcode.js"></script>
    <style>
        /* 设置顶部二维码容器的样式 */
  .qrcode-overlay {
    position: fixed; /* 绝对定位，相对于浏览器窗口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* 视口高度 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    background-color: rgba(255, 255, 255, 0.9); /* 半透明背景 */
    z-index: 1000; /* 确保覆盖其他元素 */
     display: none;
  }

  /* 设置二维码和提示文字的样式 */
  .qrcode-container {
    text-align: center;
  }

  .qrcode-hint {
    margin-top: 20px;
    font-size: 16px;
    color: #333;
  }
  .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: #333;
  }

  /* 当鼠标悬停在关闭按钮上时的样式 */
  .close-btn:hover {
    color: #000;
  }
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f7f7f7;
            margin: 0;
            padding: 0;
            color: #333;
        }
        .header {
            background-color: #3f668d;
            color: white;
            padding: 20px;
            text-align: right;
            font-size: 18px;
        }
        .header a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
        }
        .search-box, .filter-box {
            background-color: white;
            padding: 20px;
            margin: 10px 0;
            border-radius: 5px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .filter-box input, .search-box input, .filter-box button, .search-box button {
            padding: 10px;
            margin-right: 5px;
            border-radius: 3px;
            border: 1px solid #ddd;
        }
        .filter-box button, .search-box button {
            background-color: #3f668d;
            color: white;
            border: none;
            cursor: pointer;
        }
        .filter-box button:hover, .search-box button:hover {
            background-color: #2e4f6a;
        }
        .appointment-table, .details-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .appointment-table th, .appointment-table td, .details-table th, .details-table td {
            border: 1px solid #ddd;
            padding: 15px;
            text-align: left;
        }
        .appointment-table th, .details-table th {
            background-color: #3f668d;
            color: white;
        }
        .details-header {
            background-color: #3f668d;
            color: white;
            padding: 20px;
            text-align: center;
            font-size: 24px;
            margin-top: 20px;
            border-radius: 5px;
        }
        .button {
            padding: 10px 20px;
            background-color: #3f668d;
            color: white;
            border: none;
            cursor: pointer;
            border-radius: 3px;
            margin-top: 10px;
        }
        .button:hover {
            background-color: #2e4f6a;
        }
        .clickable {
            cursor: pointer;
            color: #06c;
            text-decoration: underline;
        }
    </style>
</head>
<body>

    <div class="header">
        <span>钟医生 <a href="#out">[退出登录]</a></span>
    </div>

    <div class="search-box">
        <input type="text" placeholder="输入搜索内容...">
        <button>搜索</button>
    </div>

    <div class="filter-box">
        <input type="date" placeholder="日期">
        <input id="content-search" type="text" placeholder="科室">
        <input type="text" placeholder="其他条件">
        <button id="search">筛选</button>
    </div>

    <table class="appointment-table">
        <thead>
            <tr>
                <th>患者姓名</th>
                <th>挂号时间</th>
                <th>科室</th>
                <th>单号</th>
                <th>状态指示</th>
            </tr>
        </thead>
        <tbody>
            <!-- 更多列表项 -->
        </tbody>
    </table>

    <!-- 挂号信息详情页面 -->
    <div class="details-header">
        挂号信息详情
    </div>

    <div id="patient-details">
        <table class="details-table">
            <tr>
                <th colspan="2">患者信息</th>
            </tr>
            <tr>
                <td>姓名</td>
                <td id="patient-name">张三</td>
            </tr>
            <tr>
                <td>年龄</td>
                <td id="patient-age">30岁</td>
            </tr>
            <tr>
                <td>性别</td>
                <td id="patient-gender">男</td>
            </tr>
            <tr>
                <td>联系方式</td>
                <td id="patient-contact">13800138000</td>
            </tr>
            <tr>
                <td>病情描述</td>
                <td id="patient-description">急性感冒，伴有咳嗽、发热等症状。</td>
            </tr>
            <tr>
                <td>历史就诊记录</td>
                <td id="patient-history">无</td>
            </tr>
            <tr>
                <td colspan="2">
                    <button class="button" id="addRowBtn">就诊完成</button>
                </td>
            </tr>
        </table>
    </div>
    <button class="button" id="native_pay">支付</button>
   <div class="qrcode-overlay" id="qrcode-overlay">
  <div class="qrcode-container">
    <button class="close-btn">×</button>
    <div id="qrcode"></div> <!-- 二维码将在这里显示 -->
    <div class="qrcode-hint">请使用微信扫码支付</div> <!-- 文字提示 -->
  </div>
</div>

<!-- 页面的其他内容 -->
<div class="content">
  <!-- 原有的页面内容 -->
</div>

</body>
 <script>
// 为按钮添加点击事件监听器
totalUser=[]
now_pos=0;
max_len=0;
now_len=0;
var nativepay=document.getElementById("native_pay")
nativepay.addEventListener('click',function (){
     document.getElementById('qrcode-overlay').style.display = 'block';
    console.log("触发按钮");
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://www.aistomatology.cn/wx/nativepay", true);
    xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.responseText);
    console.log(response.message);
    let parsedObject = JSON.parse(response.message);
    console.log(parsedObject.code_url);
    var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: parsedObject.code_url,
    width: 128,
    height: 128,
    colorDark : "#000000",
    colorLight : "#ffffff",
    correctLevel : QRCode.CorrectLevel.H
});
  }
};
xhr.send();
})
document.addEventListener('DOMContentLoaded', function() {
  // 假设我们需要发送一些数据到服务器，以下是示例数据
   dataToSend = {}; // 根据服务器需求填充数据

  fetch('/Doctor', {
    method: 'POST', // 使用 POST 方法
    headers: {
      'Content-Type': 'application/json', // 告诉服务器我们发送的是 JSON 数据
    },
    body: JSON.stringify(dataToSend) // 将数据转换为 JSON 字符串
  })
  .then(response => {
    if (!response.ok) {
      throw new Error(`Network response was not ok. Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {

    const tableBody = document.getElementsByClassName("appointment-table")[0];
    totalUser=data.nums;
    if (Array.isArray(data.nums)) {
      data.nums.forEach(row => {
        // 确保row是一个对象并且具有所有必要的属性
        if (typeof row === 'object' && row !== null) {
          const newRow = document.createElement('tr');
          newRow.className='delet';

          // 添加user_name单元格
          const userCell = document.createElement('td');
          userCell.innerText = row.user_name || 'N/A';
          userCell.className = 'clickable';
          userCell.dataset.id = now_pos; // 为新创建的元素赋值data-id
          newRow.appendChild(userCell);

          // 添加time单元格
          const timeCell = document.createElement('td');
          timeCell.innerText = row.time || 'N/A';
          newRow.appendChild(timeCell);

          // 添加department单元格
          const departmentCell = document.createElement('td');
          departmentCell.innerText = row.department || 'N/A';
          newRow.appendChild(departmentCell);

          // 添加order_num单元格
          const orderNumCell = document.createElement('td');
          orderNumCell.innerText = row.order_num || 'N/A';
          newRow.appendChild(orderNumCell);

          // 添加success单元格
          const successCell = document.createElement('td');
          successCell.innerText = row.success === 1 ? '已就诊' : '待就诊';
          newRow.appendChild(successCell);

          // 将新行添加到表格的tbody中
          tableBody.appendChild(newRow);
        } else {
          console.error('Error:', 'Invalid row data:', row);
        }
        now_pos++;
      });

    } else {
      console.error('Error:', 'The "nums" property is not an array or is empty.');

    }
    document.querySelectorAll('.clickable').forEach(function(element) {

        element.addEventListener('click', function() {
             const patientId = this.getAttribute('data-id');
             now_pos=parseInt(patientId)
           // console.log(totalUser[parseInt(patientId)])
            // 假设我们知道点击哪个患者，我们可以根据数据更新详情
            // 这里我们只是将姓名列的文本作为示例
            const patientName = this.textContent;
            document.getElementById('patient-name').textContent = patientName;
            // 更新其他详细信息
            document.getElementById('patient-age').textContent = '30岁'; // 根据实际情况更新
            document.getElementById('patient-gender').textContent = '男'; // 根据实际情况更新

            document.getElementById('patient-contact').textContent = totalUser[parseInt(patientId)]['user_phone']; // 更新联系方式
            document.getElementById('patient-description').textContent = '急性感冒，伴有咳嗽、发热等症状。'; // 根据实际情况更新
            document.getElementById('patient-history').textContent = '无'; // 根据实际情况更新

        });
    });
  })

  .catch(error => {
    console.error('Error:', error.message);
  });

   document.getElementById('addRowBtn').addEventListener('click', function() {

        var elementById = document.querySelector('[data-id="' + now_pos + '"]').parentElement.children[4];
        elementById.textContent='已就诊'
        alert(totalUser[now_pos]['user_name']+"就诊完成");
        dataToSend={'type':'就诊完成','id':totalUser[now_pos]['order_num']}

        fetch('/doctorFix', {
        method: 'POST', // 使用 POST 方法
        headers: {
          'Content-Type': 'application/json', // 告诉服务器我们发送的是 JSON 数据
        },
        body: JSON.stringify(dataToSend) // 将数据转换为 JSON 字符串
          })
          .then(response => {
            if (!response.ok) {
              throw new Error(`Network response was not ok. Status: ${response.status}`);
            }
            return response.json();
          })
          .then(data => {

      })
      .catch(error => {
        console.error('Error:', error.message);
      });
    });
   document.getElementById('search').addEventListener('click',function (){
       var inputvalue= document.getElementById('content-search').value;
       var clickableElements = document.getElementsByClassName('delet');
       const tableBody = document.getElementsByClassName("appointment-table")[0];
        // 循环遍历这些元素并删除它们
        while (clickableElements.length > 0) {
            clickableElements[0].parentNode.removeChild(clickableElements[0]);
        }
       pos=-1;
       totalUser.forEach(row => {
           pos++;
        // 确保row是一个对象并且具有所有必要的属性
        if (typeof row === 'object' && row !== null) {
            if(inputvalue!=row.department){
                return;
            }
          const newRow = document.createElement('tr');
            newRow.className='delet';

          // 添加user_name单元格
          const userCell = document.createElement('td');
          userCell.innerText = row.user_name || 'N/A';
          userCell.className = 'clickable';
          userCell.dataset.id = pos; // 为新创建的元素赋值data-id
          newRow.appendChild(userCell);

          // 添加time单元格
          const timeCell = document.createElement('td');
          timeCell.innerText = row.time || 'N/A';
          newRow.appendChild(timeCell);

          // 添加department单元格
          const departmentCell = document.createElement('td');
          departmentCell.innerText = row.department || 'N/A';
          newRow.appendChild(departmentCell);

          // 添加order_num单元格
          const orderNumCell = document.createElement('td');
          orderNumCell.innerText = row.order_num || 'N/A';
          newRow.appendChild(orderNumCell);

          // 添加success单元格
          const successCell = document.createElement('td');
          successCell.innerText = row.success === 1 ? '已就诊' : '待就诊';
          newRow.appendChild(successCell);

          // 将新行添加到表格的tbody中
          tableBody.appendChild(newRow);
        } else {
          console.error('Error:', 'Invalid row data:', row);
        }

      });

       document.querySelectorAll('.clickable').forEach(function(element) {
        element.addEventListener('click', function() {
             const patientId = this.getAttribute('data-id');
             now_pos=parseInt(patientId)
           // console.log(totalUser[parseInt(patientId)])
            // 假设我们知道点击哪个患者，我们可以根据数据更新详情
            // 这里我们只是将姓名列的文本作为示例
            const patientName = this.textContent;
            document.getElementById('patient-name').textContent = patientName;
            // 更新其他详细信息
            document.getElementById('patient-age').textContent = '30岁'; // 根据实际情况更新
            document.getElementById('patient-gender').textContent = '男'; // 根据实际情况更新

            document.getElementById('patient-contact').textContent = totalUser[parseInt(patientId)]['user_phone']; // 更新联系方式
            document.getElementById('patient-description').textContent = '急性感冒，伴有咳嗽、发热等症状。'; // 根据实际情况更新
            document.getElementById('patient-history').textContent = '无'; // 根据实际情况更新

        });
    });

   })
});
document.querySelector('.close-btn').addEventListener('click', function() {
  // 隐藏二维码容器
  document.getElementById('qrcode-overlay').style.display = 'none';
});
function rehavenew(){
     dataToSend = {}; // 根据服务器需求填充数据

  fetch('/havenew', {
    method: 'POST', // 使用 POST 方法
    headers: {
      'Content-Type': 'application/json', // 告诉服务器我们发送的是 JSON 数据
    },
    body: JSON.stringify(dataToSend) // 将数据转换为 JSON 字符串
  })
  .then(response => {
if (!response.ok) {
  throw new Error(`Network response was not ok. Status: ${response.status}`);
}
return response.json();
})
  .then(data => {
      p=data.isSuc
      if(p==1){
          alert("您有新的患者请求问诊")
          fetch('/Doctor', {
        method: 'POST', // 使用 POST 方法
        headers: {
          'Content-Type': 'application/json', // 告诉服务器我们发送的是 JSON 数据
        },
        body: JSON.stringify(dataToSend) // 将数据转换为 JSON 字符串
      })
                .then(response => {
if (!response.ok) {
  throw new Error(`Network response was not ok. Status: ${response.status}`);
}
return response.json();
})
          .then(data => {
              totalUser=data.nums;
              const tableBody = document.getElementsByClassName("appointment-table")[0];
              const newRow = document.createElement('tr');
              newRow.className='delet';

              // 添加user_name单元格
              const userCell = document.createElement('td');
              userCell.innerText = totalUser[totalUser.length-1]['user_name'] || 'N/A';
              userCell.className = 'clickable';
              userCell.dataset.id = totalUser.length-1; // 为新创建的元素赋值data-id
              newRow.appendChild(userCell);
              //添加点击事件
              userCell.addEventListener('click', function() {
             const patientId =totalUser.length-1;
             now_pos=parseInt(patientId)

            const patientName = totalUser[now_pos]['user_name'];
            document.getElementById('patient-name').textContent = patientName;
            // 更新其他详细信息
            document.getElementById('patient-age').textContent = '30岁'; // 根据实际情况更新
            document.getElementById('patient-gender').textContent = '男'; // 根据实际情况更新

            document.getElementById('patient-contact').textContent = totalUser[parseInt(patientId)]['user_phone']; // 更新联系方式
            document.getElementById('patient-description').textContent = '急性感冒，伴有咳嗽、发热等症状。'; // 根据实际情况更新
            document.getElementById('patient-history').textContent = '无'; // 根据实际情况更新

        });
              // 添加time单元格
              const timeCell = document.createElement('td');
              timeCell.innerText = totalUser[now_pos]['time'] || 'N/A';
              newRow.appendChild(timeCell);

              // 添加department单元格
              const departmentCell = document.createElement('td');
              departmentCell.innerText = totalUser[now_pos]['department'] || 'N/A';
              newRow.appendChild(departmentCell);

              // 添加order_num单元格
              const orderNumCell = document.createElement('td');
              orderNumCell.innerText = totalUser[now_pos]['order_num'] || 'N/A';
              newRow.appendChild(orderNumCell);

              // 添加success单元格
              const successCell = document.createElement('td');
              successCell.innerText = totalUser[now_pos]['success']=== 1 ? '已就诊' : '待就诊';
              newRow.appendChild(successCell);

              // 将新行添加到表格的tbody中
              tableBody.appendChild(newRow)
              })

      }
      else{
          console.log("未添加患者")
      }})
}

setInterval(rehavenew,5000)
</script>
</html>
